<template>
	<view class="wrapper">
		<view class="header">
			<image src="../../static/img/common_icon/vip.png" mode=""></image>
			<view class="title">
				拾玖会员卡
			</view>
			<view class="dredge">
				立即开通
			</view>
		</view>
		<view class="content">
			<view class="c_title">
				<view class="title_flex">
					<image src="" mode=""></image>
					<text>会员权益</text>
				</view>
				<view class="title_next">
					<image src="../../static/img/common_icon/next.png" mode=""></image>
				</view>
			</view>
			<view class="listbox">
				<view class="list" v-for="(i,index) in list" :key="index">
					<image :src="i.logo" mode=""></image>
					<view>{{i.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						logo:'../../static/img/common_icon/vip_1.png',
						name:'专享折扣'
					},
					{
						logo:'../../static/img/common_icon/vip_2.png',
						name:'工作日超级折扣'
					},
					{
						logo:'../../static/img/common_icon/vip_3.png',
						name:'优先预约'
					},
					{
						logo:'../../static/img/common_icon/vip_4.png',
						name:'专属客服'
					}
				]
			}
		},
		onLoad() {
	
		},
		methods: {
	
		}
	}
</script>

<style scoped>
	.wrapper{
	 margin: 0 40rpx;
	}
	.wrapper .header{
		margin-top: 20rpx;
		width: 100%;
		position: relative;
		height: 338rpx;
	}
	.wrapper .header image{height: 338rpx;width: 100%;z-index: -1;position: absolute;}
	.wrapper .header .title{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:600;
		line-height:44rpx;
		color:rgba(13,104,102,1);
		padding: 25rpx 0rpx 0rpx 40rpx;
	}
	.wrapper .header .dredge{
		background: #0D6866;
		position: absolute;
		right: 0;
		bottom: 0;
		height: 60rpx;
		
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:60rpx;
		padding: 0 60rpx;
		color:rgba(255,255,255,1);
		border-radius: 40rpx 0rpx 40rpx 0rpx;;
	}
	.wrapper .content{
		background:white ;
		border-radius:40rpx;
		margin-top: 20rpx;
	}
	.wrapper .content .c_title{
		display: flex;
		padding: 20rpx 32rpx;
	}
	.wrapper .content .c_title .title_flex{
		flex: 1;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(53,53,53,1);
		line-height:0;
	}
	.wrapper .content .c_title .title_flex text{
		padding-left: 8rpx;
	}
	.wrapper .content .c_title image{
		width: 34rpx;
		height: 34rpx;
		vertical-align:middle;
	}
	.wrapper .content .c_title .title_next{
		width: 34rpx;
		line-height:0;
	}
	.wrapper .content .listbox{display: flex;padding-bottom:28rpx;}
	.wrapper .content .listbox .list{flex: 1;text-align: center;font-size: 0;}
	.wrapper .content .listbox .list image{width: 80rpx;height: 80rpx;}
	.wrapper .content .listbox .list view{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(53,53,53,1);
		opacity:0.8;
		margin-top: 20rpx;
	}
</style>
